import {
  ProFormDateRangePicker,
  ProFormInstance,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Popconfirm, message, Tag, Breadcrumb } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';

import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormDatePicker,
} from '@ant-design/pro-components';
import ImportExcel from '../ImportExcel';

import styles from './index.less';
import { useRef } from 'react';

export default () => {
  const ddd = useRef<ProFormInstance>();

  //获取项目列表
  const getAllNationalMajorProject = useRequest((data = undefined) => {
    return {
      url: `http://10.1.40.84:9993/majorProject/getAllNationalMajorProject`,
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  //新增项目
  const addNationalMajorProjectDetail = useRequest(
    (data = undefined) => {
      return {
        url: `http://10.1.40.84:9993/majorProject/addNationalMajorProjectDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //删除项目
  const deleteNationalMajorProjectDetail = useRequest(
    (data = undefined) => {
      return {
        url: `http://10.1.40.84:9993/majorProject/deleteNationalMajorProjectDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //编辑项目
  const updateNationalMajorProjectDetail = useRequest(
    (data = undefined) => {
      return {
        url: `http://10.1.40.84:9993/majorProject/updateNationalMajorProjectDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  const confirm = (e: any) => {
    deleteNationalMajorProjectDetail.run({ id: e.id }).then(() => {
      getAllNationalMajorProject.run();
      message.success('删除成功');
    });
  };
  const cancel = (e: any) => {
    message.error('已取消');
  };
  const columns = [
    {
      title: '人员姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '任职年份',
      dataIndex: 'year',
      key: 'year',
      valueType: 'dateYear',
      hideInTable: true,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
      // copyable: true,
      // ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '资助时间（开始）',
      dataIndex: 'startTime',
      key: 'startTime',
      hideInSearch: true,
    },
    {
      title: '资助时间（结束）',
      dataIndex: 'endTime',
      key: 'endTime',
      hideInSearch: true,
    },
    {
      title: '项目年份',
      key: 'years',
      dataIndex: 'years',
      hideInSearch: true,
      // ellipsis: true,
      render: (text: any) =>
        (text || [])?.sort().map((item: any, index: any) => {
          return <Tag key={index}>{item}</Tag>;
        }),
    },
    {
      title: '操作',
      key: 'option',
      width: 120,
      valueType: 'option',
      render: (text: any, record: any) => [
        <ModalForm
          title="编辑人员"
          trigger={<a key="1">编辑</a>}
          autoFocusFirstInput
          modalProps={{
            onCancel: () => console.log('run'),
            destroyOnClose: true,
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            console.log(values);
            updateNationalMajorProjectDetail.run(values).then(() => {
              message.info('编辑成功！');
              getAllNationalMajorProject.run();
            });
            return true;
          }}
          formRef={ddd}
          initialValues={record}
          key="1"
        >
          <ProForm.Group>
            <ProFormText width="sm" name="id" hidden />
            <ProFormText width="sm" name="name" label="姓名" />
            <ProFormText width="sm" name="projectName" label="项目名称" />
            <ProFormDateRangePicker
              width="sm"
              fieldProps={{
                picker: 'month',
                format: 'YYYY-MM', //'YYYY年MM月'
                // format: 'YYYY年MM月',
              }}
              name="time"
              label="资助开始时间-资助结束时间"
            />
            {/* <ProFormDatePicker.Month
              width="sm"
              name="startTime"
              label="资助时间（开始）"
              fieldProps={{
                format: (value) => value.format('YYYY年MM月'),
              }}
            />
            <ProFormDatePicker.Month
              width="sm"
              name="endTime"
              label="资助时间（结束）"
              fieldProps={{
                format: (value) => value.format('YYYY年MM月'),
              }}
            /> */}
            <ProFormSelect
              width="md"
              options={[
                {
                  value: 2026,
                  label: '2026',
                },
                {
                  value: 2025,
                  label: '2025',
                },
                {
                  value: 2024,
                  label: '2024',
                },
                {
                  value: 2023,
                  label: '2023',
                },
                {
                  value: 2022,
                  label: '2022',
                },
                {
                  value: 2021,
                  label: '2021',
                },
                {
                  value: 2020,
                  label: '2020',
                },
                {
                  value: 2019,
                  label: '2019',
                },
                {
                  value: 2018,
                  label: '2018',
                },
                {
                  value: 2017,
                  label: '2017',
                },
              ]}
              name="years"
              label="任职年份"
              mode="multiple"
            />
          </ProForm.Group>
        </ModalForm>,
        <Popconfirm
          key={'2'}
          title="确定删除吗？"
          onConfirm={() => confirm(record)}
          onCancel={() => cancel}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>,
      ],
    },
  ];

  const Refresh = () => {
    getAllNationalMajorProject.run();
  };

  return (
    <PageContainer
      header={{
        title:
          '选取年份查询后,绿色代表当年该人员新加入某国家重大项目，红色代表当年该人员退出某国家重大项目',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>队伍建设与人才培养</Breadcrumb.Item>
            <Breadcrumb.Item>国家重大科技计划</Breadcrumb.Item>
          </Breadcrumb>
        ),
        // extra: [
        //   <ImportExcel
        //     key="1"
        //     tableName={'NATIONAL_MAJOR_PROJECT'}
        //     Refresh={Refresh}
        //   />,
        //   <Button
        //     key="2"
        //     type="primary"
        //     onClick={() => {
        //       window.open(
        //         'http://10.1.40.84:9993/file/model/NATIONAL_MAJOR_PROJECT_模板.xlsx',
        //       );
        //     }}
        //   >
        //     下载模版
        //   </Button>,
        // ],
      }}
      // header={{
      //   extra: [
      //     <ImportExcel
      //       key="1"
      //       tableName={'NATIONAL_MAJOR_PROJECT'}
      //       Refresh={Refresh}
      //     />,
      //     <Button
      //       key="2"
      //       type="primary"
      //       onClick={() => {
      //         window.open(
      //           'http://10.1.40.84:9993/file/model/NATIONAL_MAJOR_PROJECT_模板.xlsx',
      //         );
      //       }}
      //     >
      //       下载模版
      //     </Button>,
      //   ],
      // }}
    >
      <ProTable
        columns={columns}
        dataSource={getAllNationalMajorProject?.data}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        rowClassName={(record: any) => {
          if (record.yearFlag === '离开') {
            return styles.leave;
          } else if (record.yearFlag === '正常') {
            return null;
          } else if (record.yearFlag === '新增') {
            return styles.add;
          } else {
            return null;
          }
        }}
        onSubmit={(e: any) => {
          getAllNationalMajorProject.run(e);
        }}
        onReset={() => {
          getAllNationalMajorProject.run();
        }}
        loading={getAllNationalMajorProject.loading}
        dateFormatter="string"
        headerTitle="人员列表"
        options={false}
        toolBarRender={() => [
          <ModalForm
            title="新增国家重大科技计划"
            trigger={
              <Button key="primary" type="primary">
                新增国家重大科技计划
              </Button>
            }
            autoFocusFirstInput
            modalProps={{
              onCancel: () => console.log('run'),
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
              addNationalMajorProjectDetail.run(values).then(() => {
                getAllNationalMajorProject.run();
                message.info('添加成功！');
              });
              return true;
            }}
            key="1"
          >
            <ProForm.Group>
              <ProFormText width="sm" name="name" label="姓名" />
              <ProFormText width="sm" name="projectName" label="项目名称" />
              <ProFormDateRangePicker
                width="sm"
                fieldProps={{
                  picker: 'month',
                  format: 'YYYY-MM',
                }}
                name="time"
                label="资助开始时间-资助结束时间"
              />
              {/* <ProFormDatePicker.Month
                width="sm"
                name="startTime"
                label="资助时间（开始）"
                fieldProps={{
                  format: (value) => value.format('YYYY年MM月'),
                }}
              />
              <ProFormDatePicker.Month
                width="sm"
                name="endTime"
                label="资助时间（结束）"
                fieldProps={{
                  format: (value) => value.format('YYYY年MM月'),
                }}
              /> */}
              <ProFormSelect
                width="md"
                options={[
                  {
                    value: 2026,
                    label: '2026',
                  },
                  {
                    value: 2025,
                    label: '2025',
                  },
                  {
                    value: 2024,
                    label: '2024',
                  },
                  {
                    value: 2023,
                    label: '2023',
                  },
                  {
                    value: 2022,
                    label: '2022',
                  },
                  {
                    value: 2021,
                    label: '2021',
                  },
                  {
                    value: 2020,
                    label: '2020',
                  },
                  {
                    value: 2019,
                    label: '2019',
                  },
                  {
                    value: 2018,
                    label: '2018',
                  },
                  {
                    value: 2017,
                    label: '2017',
                  },
                ]}
                name="years"
                label="任职年份"
                mode="multiple"
              />
            </ProForm.Group>
          </ModalForm>,
        ]}
      />
    </PageContainer>
  );
};
